﻿@model MaintenanceAllocatModel

@Html.ValidationSummary(false)
@Html.HiddenFor(model => model.MaintenanceId)
<div class="content" style="padding-bottom:0;">
    <div class="form-horizontal">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.ResponsibleTeamId)
                        </div>
                        <div class="col-md-9">
                            @Html.NopDropDownListFor(model => model.ResponsibleTeamId, Model.AvailableDepartments)
                            @Html.ValidationMessageFor(model => model.ResponsibleTeamId)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.MaintenancePersonIds)
                        </div>
                        <div class="col-md-9">
                                    @Html.EditorFor(model => model.MaintenancePersonIds, new { SelectList = Model.AvailableMaintenanceUsers })
                            <script>
                                    $(document).ready(function() {
                                        var customerRolesIdsInput = $('#@Html.FieldIdFor(model => model.MaintenancePersonIds)').data("kendoMultiSelect");
                                        customerRolesIdsInput.setOptions({
                                            customerRolesIdsInput: false
                                        });

                                        @if (Model.AvailableMaintenanceUsers.Count == 0)
                                        {
                                            <text>
                                                customerRolesIdsInput.setOptions({
                                                    enable: false,
                                                    placeholder: '@T("Admin.Customers.Customers.Fields.CustomerRoles.NoRoles")'
                                                });
                                                customerRolesIdsInput._placeholder();
                                                customerRolesIdsInput._enable();
                                            </text>
                                        }
                                        $("#@Html.FieldIdFor(model => model.ResponsibleTeamId)").change(function () {
                                            var selectedItem = $(this).val();
                                            $.ajax({
                                                cache: false,
                                                type: "GET",
                                                url: "@(Url.Action("GetUsersByDepartmentId", "Customer"))",
                                                data: { "departId": selectedItem, "onlyRepairman": true },
                                                success: function(data) {
                                                    var availableOptions = [];
                                                    $.each(data, function (id, option) {
                                                        availableOptions.push({ text: option.name, value: option.id });
                                                    });  
                                                    customerRolesIdsInput.setDataSource(availableOptions);
                                                    customerRolesIdsInput.value([]);
                                                },
                                                error: function(xhr, ajaxOptions, thrownError) {
                                                    alert('Failed to retrieve states.');
                                                }
                                            });
                                        });
                                    });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>